React Doctor pass: a11y labels, Fast Refresh boundaries, stable keys, SVG precision (100/100)#4
Merged
Conversation
Advisory PR scans + main-branch trend tracking via millionco/react-doctor@v2, a root `bun run doctor` script, and the local triage skill for agents. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The changelog/install anchors passed to `Button render={...}` only receive
their visible text at runtime, so statically they are empty links that
screen-reader tooling flags as announcing nothing. Give each an aria-label
bound to the same i18n message as the visible text so the two cannot drift.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Index keys reattach React state and DOM to the wrong rows if a list ever reorders or filters. Breadcrumb segments now key by href/label and stats by label; code lines and support-matrix rows, whose content can legitimately repeat, key via a new `keyed()` helper (content + occurrence counter) so keys follow the item and duplicates never collide. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The mark was an Illustrator export with 6-decimal coordinates in a ~103-unit viewBox rendered 23px tall — sub-pixel precision nobody can see. Rounding all 352 numbers roughly halves the inline path data. Dot-form numbers that ride on the previous coordinate's implicit separator keep their dot or gain an explicit comma, so no coordinates merge. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A file that exports both a component and anything else (cva style objects, hooks) breaks Vite Fast Refresh — every edit full-reloads and wipes component state. Move the four cva variants to sibling *-variants.ts files and the useTheme/useMessages hooks next to their contexts (theme-context.ts, i18n/context.ts), repointing importers. The @elide/ui barrel re-exports everything from the new locations, so the public API is unchanged. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
React Doctor found no new issues. 🎉 Reviewed by React Doctor for commit |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4 +/- ##
==========================================
- Coverage 84.85% 83.61% -1.25%
==========================================
Files 32 38 +6
Lines 601 659 +58
Branches 230 254 +24
==========================================
+ Hits 510 551 +41
- Misses 91 108 +17
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Full React Doctor triage of
@elide/ui— fixes all 14 findings across 4 rules, taking the health score to 100/100 (No issues found!). Also lands the React Doctor CI workflow, a rootbun run doctorscript, and the local agent triage skill. The public API of@elide/uiis unchanged — the barrel re-exports everything from its new locations.Each fix follows the canonical recipe fetched from react.doctor for its rule, and every commit builds green on its own:
fix(a11y)— the changelog/install anchors passed toButton render={...}are empty in source (their text merges in at runtime), so assistive tooling sees unlabeled links. Each now carries anaria-labelbound to the same i18n message as its visible text, so the accessible name can't drift from what's on screen. (×3 sites)refactor(ui)— files exporting both a component and something else (cva variants, hooks) break Vite Fast Refresh, wiping component state on every edit. The four cva style objects moved to sibling*-variants.tsfiles;useTheme/useMessagesmoved next to their contexts (theme-context.ts,i18n/context.ts). (×6 files)fix(ui)— array-index keys reattach state/DOM to the wrong rows if a list reorders or filters. Breadcrumbs key byhref ?? label, stats bylabel; code lines and support-matrix rows (where content can legitimately repeat) key via a newkeyed()helper: content + occurrence counter. (×4 lists)perf(ui)— the Elide mark shipped Illustrator-export 6-decimal coordinates in a ~103-unit viewBox drawn 23px tall; all 352 numbers rounded to 2 decimals (~halves the inline path data) with separator-safe handling so no coordinates merge.Test plan
npx react-doctor@latest --verbose→ No issues found, 100/100 (was 14 issues)tsc --noEmitcleanvitest— 74/74 tests passeslint srccleantsuppackage build succeeds🤖 Generated with Claude Code